<template>
  <view>

    <view class="mt-1">
      <view
          v-for="(newsItem, index) in newsContentList"
          :key="newsItem.id"
          class="bg-fff mb-2 p-2 color-92"
          @click="goUrl(`/subPages/newsDetails/newsDetails?id=${newsItem.id}`)"
      >
        <view class="py-1 font30">{{ newsItem.title }}</view>
        <view class="text-clamp-two font26">
          {{ newsItem.content }}
        </view>
        <view class="d-flex d-flex-between py-1">
          <text></text>
          <text class="font20">发布人：{{ newsItem.editor_name }} {{ newsItem.created_at }}</text>
        </view>
        <image
            class="news-image rounded10"
            mode="aspectFit"
            :src="newsItem.image"
        ></image>
        <view class="d-flex d-flex-around pt-2" style="display: none">
          <view class="d-flex d-flex-middle">
            <text class="iconfont icon-yanjing1 font40"></text>
            <text class="ml-1 font20">{{ newsItem.readCount }}</text>
          </view>
          <view class="d-flex d-flex-middle">
            <text class="iconfont icon-Gc_115_line-Star"></text>
            <text class="ml-1 font20">{{ newsItem.starCount }}</text>
          </view>
          <view class="d-flex d-flex-middle">
            <text class="iconfont icon-xiaoxi font38"></text>
            <text class="ml-1 font20">{{ newsItem.commentCount }}</text>
          </view>
          <view class="d-flex d-flex-middle">
            <text class="iconfont icon-dianzan font34"></text>
            <text class="ml-1 font20">{{ newsItem.likeCount }}</text>
          </view>
        </view>
      </view>

      <!-- 加载提示 -->
      <view v-if="loadingType == 1" class="loading-text text-center py-2">
        加载中...
      </view>
      <view v-else-if="loadingType == 2 && newsContentList.length > 0" class="loading-text text-center py-2">
        没有更多数据了
      </view>
    </view>


  </view>
</template>

<script>
import {
  mapState
} from "vuex"
import {homeApi} from "@/http/homeApi";

export default {
  data() {
    return {
      newsContentList: [],
      currentPage: 1,
      loadingType: 0,
    }
  },
  computed: {
    ...mapState({
      loginState: state => state.loginState
    })
  },
  onLoad() {
    this.goNotifications()
  },
  methods: {
    goUrl(urlPages, data) {
      if (!this.loginState) {
        uni.showToast({
          title: '未登录，请先登录！',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateTo({
            url: '/subPages/login/login'
          })
        }, 1500)
      } else {
        uni.navigateTo({
          url: urlPages
        })
      }
    },
    async goNotifications() {
      let that = this
      that.loadingType = 1
      try {
        console.log('11111111')
        let res = await homeApi.getNotifications({
          page: this.currentPage,
        });
        console.log(res)
        if (res.data) {
          that.newsContentList = that.newsContentList.concat(res.data)
        }
        if (res.data && res.data.length > 9) {
          that.loadingType = 0
        } else {
          that.loadingType = 2
        }
      } catch (error) {
        that.loadingType = 2
      }
    }
  },
  // 加载更多数据
  onReachBottom() {
    console.log('加载更多数据');
    if (this.loadingType == 2 || this.loadingType == 1) {
      return;
    }
    this.currentPage++
    this.goNotifications();
  }
}
</script>

<style scoped>
.color-92 {
  color: rgba(92, 92, 92, 1);
}

.text-clamp-two {
  line-height: 1.6; /* 调整行高使2行高度固定 */
  height: calc(1.6em * 2); /* 固定2行高度 */
}

.news-image {
  height: 228rpx;
  width: 100%;
  display: block;
  margin: 0 auto;
  background-color: rgba(204, 204, 204, 1);
}
</style>
